<!DOCTYPE html>
<html height100 xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:replace="authority/dynamic/common/edit/head"/>
</head>

<body class="childrenBody exclude-table-style" padding10>
<!--/*@thymesVar id="pageId" type="java.lang.String"*/-->
<form class="layui-form layui-form-pane" lay-filter="form-dml" onsubmit="return false;">
    <input type="hidden" name="pageId" th:value="${pageId}">
    <div class="layui-form-item">
        <label for="T_tableId" class="layui-form-label"><span class="x-red">*</span>数据表格</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="T_tableId" lay-verify="required"
                   name="tableId" placeholder="请选择表格" autocomplete="off" readonly>
        </div>
        <div class="my-notes">
            <div class="layui-elip layui-text content">
                设置要显示在页面中的表格
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="B_sort" class="layui-form-label"><span class="x-red">*</span>排序号</label>
        <div class="layui-input-block">
            <input type="number" id="B_sort" name="sort" autocomplete="off" class="layui-input"
                   lay-verify="required|number" placeholder="">
        </div>
        <div class="my-notes">
            <div class="layui-elip layui-text content">
                简单页面初始化时以这个序号顺序排列表格位置
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <button class="layui-btn" style="float: right" id="my-submit" lay-filter="submit" lay-submit>保存信息</button>
    </div>
</form>

<script th:replace="authority/common/currency/footer"></script>
<script>
    $('body').on('mouseover', '.my-notes .content', function (event) {
        $('.my-notes .my-notes-show').each(function (i, e) {
            $(this).remove();
        });
        $(this).closest('.my-notes').append($('<div class="my-notes-show"></div>').append($('<div class="layui-text"><div>').html($(this).html())));
        //鼠标悬浮
    }).on('mouseout', '.my-notes-show', function (event) {
        //鼠标离开
        $(this).remove();
    });
    layui.use(['form', 'lutil', 'tableSelect'], function () {
        var form = layui.form,
            lutil = layui.lutil,
            tableSelect = layui.tableSelect;


        tableSelect.render({
            elem: '#T_tableId',	//定义输入框input对象 必填
            checkedKey: 'id', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'title',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '模糊搜索 表格名称',	//搜索输入框的提示文字 默认关键词搜索
            searchCallback: function (table, data) {
                var searchs = [];
                $.each(data.field, function (i, e) {
                    searchs.push({field: i, formula: '<->', value: e});
                });
                table.query({searchs: JSON.stringify(searchs)});
            },
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                height: 200,
                limit: 3,
                width: 600,
                limits: [3, 5, 10, 20],
                url: content_path + 'authority/plat/dml/paging_query.do',
                where: {
                    dmlId: 'B2D6EFFE95344C3A8B10BCBC549CC6C4',
                    selectType: 2
                },
                headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
                cols: [
                    [
                        {type: 'radio'},
                        {field: 'id', title: 'ID'},
                        {field: 'title', title: '表格名称'},
                        {field: 'dmlName', title: 'DML名称'},
                        {field: 'modifyUserName', title: '最后修改人'},
                        {field: 'modifyTime', title: '最后修改时间'}
                    ]
                ]
            },
            done: function (elem, data) {
                if (data.data.length > 0) {
                    $(elem).val(data.data[0].title + " （" + data.data[0].id + "）");
                }
            }
        });

        form.on('submit(submit)', function (formData) {
            var loading = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf(content_path + 'authority/dynamic_page/table/save.do', $.extend(formData.field, {
                tableId: $(formData.form).find('input[name=tableId]').attr('ts-selected')
            }), function (res) {
                lutil.success_msg(res.message);
                var index = window.name && parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index);
            }, null, function (res) {
                layer.close(loading);
            });
            return false;
        });

        if ("[[${tableId}]]" !== '') {
            var loading = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf(content_path + 'authority/dynamic_page/table/detail.do', {
                tableId: '[[${tableId}]]',
                pageId: '[[${pageId}]]'
            }, function (res) {
                form.val("form-dml", res.data);
                ajaxRequestByCsrf(content_path + 'authority/plat/dml/paging_query.do', {
                    dmlId: 'B2D6EFFE95344C3A8B10BCBC549CC6C4',
                    selectType: 2,
                    searchs: JSON.stringify([{field: 'tableId', value: res.data.tableId}])
                }, function (res) {
                    if (res.data.length > 0) {
                        $('#T_tableId').val(res.data[0].title + " （" + res.data[0].id + "）").attr('ts-selected', res.data[0].id);
                    }
                }, null, function (res) {
                    layer.close(loading);
                });
            }, null);
        }
    })
</script>
</body>
</html>